<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新的示例</title>
	</head>
	<body>
		<div id="app" align="center">
			ID:<input type="text" disabled v-model="user.id"/>
			姓名:<input type="text" v-model="user.name" />
			年龄:<input type="text" v-model="user.age"/>
			性别:<input type="text" v-model="user.sex" />
			<button @click="updateUser">更新</button>
			<button @click="addUser">增加</button>
			<table id ="tab1" border="1px" width="700px" align="center">
				<tr>
					<td colspan="5" align="center"><h1>表格数据</h1></td>
				</tr>
				<tr align="center">
					<td>ID</td>
					<td>姓名</td>				
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.sex"></td>
					<td>
						<button @click="updateUserBtn(item)">修改</button>
						<button @click="deleteUser(item.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		<script src="../js/axios.js">
		</script>
		<script src="../js/vue.js">	
		</script>
		<script type="text/javascript">
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el:"#app",
				data:{
					userList:[],
					user:{
						id: "",
						name: "",
						age: "",
						sex: ""
					}
				},
				methods:{
					getUserList(){
						axios.get("/getUser").then(result => {
							this.userList = result.data
						})
					},
					deleteUser(id){
						axios.delete("/user"+id).then(result => {
							this.getUserList()
						})
					},
					updateUserBtn(user){
						this.user=user
					},
					updateUser(){
						axios.put("/updateUser2",this.user).then(result => {
							this.getUserList()
						})
					},
					addUser(user){
						axios.post("/addUser1",this.user).then(result => {
							alert(result.data)
							this.getUserList()
						})
					}
				},
				mounted() {
					this.getUserList()
				}
			})
		</script>
	</body>
</html>
